<template>
  <div class="nva_menu_container">
    <!-- nav页面 -->
    <!-- <div class="menu_container wst">
      <contSidebar v-if="list.length" name="评卷老师管理" :activeItem="activeItem" :siderList="list" @handleAcitve="handleAcitve"></contSidebar>
    </div> -->
    <!-- 列表页面 -->
    <div class="block-container container" ref="container" v-if="show"  @click="showIdex=null">
      <p class="title">评卷老师管理</p>
      <div class="list-paper" v-show="!group">
        <div class="operation">
          <a href="javascript:;" class="save" @click="dialogVisible = true">导入评卷老师</a>
          <a href="javascript:;" class="save" @click="deleteUser('all','unban')">解冻全部账号</a>
          <a href="javascript:;" class="save" @click="deleteUser('all','ban')">冻结全部账号</a>
        </div>
        <table class="table" border="1" cellspacing="0" cellpadding="0" borderColor="#e0e0e0" v-loading="loading">
          <thead>
            <tr>
              <td>评卷组编号</td>
              <td>评卷实现名称</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody v-if="paper.length">
            <tr v-for="(item,i) in paper" :key="i">
              <td>{{item.id}}</td>
              <td>{{item.examName}}</td>
              <td>
                <a href="javascript:;" style="font-size: 14px;color:#4177FF" @click="findTeacher(item)">查看分组</a>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="8">
                <p>未找到任何数据</p>
              </td>
            </tr>
          </tbody>
         </table>
      </div>

      <div class="list-teacher" v-show="group">
        <a href="javascript:;" style="font-size: 14px;color:#4177FF" @click="group=false;"><返回评卷老师管理</a>
        <p class="page-title">{{pageData.examName}}</p>
        <ul class="list-tabs">
          <li :class="[tabsStatus === 0 ? 'active' : '']" @click="changeTabs(0)">初评组</li>
          <li :class="[tabsStatus === 1 ? 'active' : '']" @click="changeTabs(1)">终评组</li>
        </ul>
        <div class="info-search">
          <label for="">
            老师姓名:
            <input type="text" v-model="search.userName">
          </label>
          <a href="javascript:;" class="save" @click="seachResult">搜索</a>
          </div>
          <div class="operation">
            <a href="javascript:;" class="save" @click="addUser">新增评卷老师</a>
          </div>
          <table class="table" border="1" cellspacing="0" cellpadding="0" borderColor="#e0e0e0" v-loading="loading">
            <thead>
              <tr>
                <td>老师姓名</td>
                <td>账号</td>
                <td>所在区域</td>
                <td>账号状态</td>
                <td>试卷编号</td>
                <td>是否为主管</td>
                <td>操作</td>
              </tr>
            </thead>
            <tbody v-if="userList.length">
              <tr v-for="(item,i) in userList" :key="i" :class="item.status?'ban':''">
                <td>{{item.userName}}</td>
                <td>{{item.loginName}}</td>
                <td>{{item.countyName}}</td>
                <td>{{item.status=='0'?'正常':'冻结'}}</td>
                <td>{{item.paperId}}</td>
                <td>{{item.isSuper ? '是' : '否'}}</td>
                <td>
                    <a href="javascript:;" @click="$set(userList[i], 'show', true)"><i class="el-icon-more"></i></a>
                    <ul v-if="item.show" @mouseleave="$set(userList[i], 'show', false)">
                      <li @click="showView(item)">更多信息</li>
                      <li @click="editUser(item)">修改信息</li>
                      <li @click="deleteUser(item, 'delete')">删除账号</li>
                      <li @click="resetPassword(item)">重置密码</li>
                      <!-- <li >冻结账号</li> -->
                      <li v-if="item.status"  @click="deleteUser(item, 'unban')">解冻</li>
                      <li v-else  @click="deleteUser(item, 'ban')">冻结</li>
                    </ul>
                </td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="8">
                  <p>未找到任何数据</p>
                </td>
              </tr>
            </tbody>
          </table>
        <pagination v-if="userList.length" :listQuery="page" @changeCurrentPage="changeCurrentPage"></pagination>
      </div>

      <!-- 导入管理员 -->
      <el-dialog
        title="导入评卷老师"
        :visible.sync="dialogVisible"
        width="30%"
        center>
          <el-upload
          class="upload-demo"
          :action="GLOBAL.COMMON"
          ref="upload"
          style="width:80%"
          :limit="1"
          :auto-upload="false"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <a :href='GLOBAL.COMMON+"/sysuser/download_template"' class="download">导入模板下载</a>
          <span class="fuzhu"></span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="uploadUser">确 定</el-button>
          </span>
      </el-dialog>
      <!-- 查看 -->
      <el-dialog
        title="查看评卷老师信息"
        :visible.sync="viewDialogVisible"
        width="30%"
        center>
        <div class="show-content">
          <p><span>管理员姓名：</span><span>{{showForm.userName}}</span></p>
          <p><span>管理员角色：</span><span>{{showForm.sysUserName}}</span></p>
          <p><span>管理员账号：</span><span>{{showForm.loginName}}</span></p>
          <p><span>所在区域：</span><span>{{showForm.countyName}}</span></p>
          <p><span>所在学校：</span><span>{{showForm.schoolName}}</span></p>
          <p><span>联系电话：</span><span>{{showForm.phonenumber}}</span></p>
          <p><span>电子邮箱：</span><span>{{showForm.email}}</span></p>
          <p><span>是否是主管评卷：</span><span>{{showForm.isSuper ? '是' : '否'}}</span></p>
          <p><span>试卷编号：</span><span>{{showForm.paperId}}</span></p>
        </div>
        <span class="fuzhu"></span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="viewDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!--删除提示  -->
      <!-- <delConfim :delVisible.sync="isDelete" @handleDelete="handleDelete"></delConfim> -->
      <el-dialog
        title="提示"
        :visible.sync="isDelete"
        width="30%">
        <p>{{title}}</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDelete = false">取 消</el-button>
          <el-button type="primary" @click="handleDelete">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--新增页面 -->
    <div class="container" style="margin-left:0;width:calc(100% - 50px)" ref="container" v-else>
      <a class="back" @click="show=true;getUser()"><i class="el-icon-back"></i><span>返回</span></a>
      <P class="middle-font">{{op===0?'新增评卷老师':'编辑评卷老师'}}</P>
      <el-form ref="form" :model="form" label-width="140px" style="width:60%" class="c-form">
        <el-form-item label="老师姓名">
          <el-input v-model="form.userName" clearable></el-input>
        </el-form-item>
        <el-form-item label="老师账号">
          <el-input v-model="form.loginName" :disabled="op=='1'" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password" @focus="form.password=''" clearable></el-input>
        </el-form-item>
        <el-form-item label="所在区域">
          <!-- <el-input ></el-input> -->
          <p>{{address}}</p>
        </el-form-item>
        <el-form-item label="试卷的编号">
          <el-select v-model="form.paperId" style="width: 400px" disabled>
            <el-option :value="item.id" v-for="item in paper" :key="item.code" :label="item.examName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phoneNumber" clearable></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.email" clearable></el-input>
        </el-form-item>
      </el-form>
      <span class="fuzhu"></span>
      <div class="btn">
        <a href="javascript:;" class="save" @click="saveUser">确定</a>
        <a href="javascript:;" class="cancel" @click="show=true;getUser()">取消</a>
      </div>
    </div>
  </div>
</template>

<script>
import contSidebar from '@/components/ContSidebar.vue'
import pagination from '@/components/Pagination.vue'
// import delConfim from '@/components/DelConfim.vue'
import axios from 'axios'
export default {
  data () {
    return {
      userList: [
        // { name: '张老师', userName: 'root@163.com', area: '镇海区', school: '幼儿园', show: false},
        // { name: '张老师', userName: 'root@163.com', area: '镇海区', school: '幼儿园', show: false},
        // { name: '张老师', userName: 'root@163.com', area: '镇海区', school: '幼儿园', show: false}
      ],
      dialogVisible: false,
      viewDialogVisible: false,
      isDelete: false,
      list: [],
      form: {
        userName: '',
        loginName: '',
        password: '',
        phoneNumber: '',
        email: '',
        paperId: '',
        isSuper: '',
        areaId: this.activeIisSuper
      },
      activeItem: 1,
      show: true,
      address: '海曙区',
      // 查看字段
      showForm: {},
      // 搜索字段
      search: {
        roleId: '',
        schoolName: '',
        userName: ''
      },
      // 角色列表
      role: [],
      // 判断新增还是编辑
      op: 0,
      // 临时存储密码，编辑的时候判断是否更新
      temp: {},
      // 分页参数
      page: {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      },
      loading: false,
      title: '',
      userInfo: {},
      allBan: {},
      paper: [],
      pageData: {},
      group: false,
      tabsStatus: 0
      // pageList: []
    }
  },
  methods: {
    // nav接收参数
    handleAcitve (obj) {
      this.activeItem = obj.id
      this.address = obj.name
      // 初始化分页信息
      this.page = {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      }
      this.getUser()
    },
    // 新增
    addUser () {
      this.op = 0
      this.show = false
      this.form = {
        userName: '',
        loginName: '',
        password: '',
        phoneNumber: '',
        email: '',
        areaId: this.activeItem,
        paperId: this.pageData.id,
        isSuper: this.tabsStatus === 0 ? false : true
      }
    },
    // 编辑
    editUser (item) {
      console.log('132456', item)
      if (!item.sysRoles.length) {
        this.$message.error('无法获取用户角色！')
        return
      }
      if (item.sysRoles[0].roleKey === 'school') {
        this.$message.error('您不能修改校级管理员账号！')
        return
      }
      this.op = 1
      this.show = false
      this.form.userName = item.userName
      this.form.loginName = item.loginName
      this.form.password = item.password ? item.password : '******'
      this.form.phoneNumber = item.phonenumber
      this.form.isSuper = this.tabsStatus === 0 ? false : true
      this.form.paperId = item.paperId
      this.form.email = item.email
      this.form.id = item.userId
      // // 暂存用户名和密码
      this.temp.password = '******'
    },
    // 保存用户信息
    saveUser () {
      console.log(this.form)
      if (this.op) {
        // 编辑操作
        this.$http.updateUser({
          email: this.form.email,
          id: this.form.id,
          phoneNumber: this.form.phoneNumber,
          userName: this.form.userName,
          paperId: this.pageData.id
        }).then(res => {
          if (res.code === 20000) {
            if (this.temp.password === this.form.password) {
              this.$message.success('修改成功！')
              this.show = true
              this.getUser()
            } else {
              this.$http.updatePassword({
                id: this.form.id,
                password: this.form.password
              }).then(res => {
                if (res.code === 20000) {
                  this.$message.success('修改成功！')
                  this.show = true
                  this.getUser()
                } else {
                  this.$message.error(res.msg)
                }
              })
            }
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        // 添加操作
        this.$http.addEvaluation(this.form).then(res => {
          if (res.code === 20000) {
            this.$message.success('添加成功！')
            this.show = true
            this.getUser()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 页面初始化
    async initData () {
      this.loading = true
      // 获取一下当前用户的角色
      let obj = JSON.parse(sessionStorage.getItem('userData'))
      if (obj.roleKey === 'city') {
        this.form.roleKey = 'county'
      } else if (obj.roleKey === 'county') {
        this.form.roleKey = 'school'
      }
      // 获取区域信息
      let res = await this.$http.getArea()
      if (res.code === 20000) {
        let obj = res.data.child
        this.list = []
        obj.map(item => {
          this.list.push({
            id: item.id,
            name: item.areaName
          })
        })
        console.log('res.data.child[0]', this.list)
        this.activeItem = res.data.child[0].id
        this.address = res.data.child[0].areaName
      } else {
        this.$message.error(res.msg)
      }
      this.loading = false
    },
    // 获取管理员列表
    async getUser () {
      this.loading = true
      let result = await this.$http.getAdmin({
        // areaId: this.activeItem,
        userName: this.search.userName,
        pageNum: this.page.page,
        pageSize: this.page.pageSize,
        roleId: 22,
        paperId: this.pageData.id,
        isSuper: this.tabsStatus === 0 ? false : true
      })
      if (result.code === 20000) {
        for (let i = 0; i < result.data.data.length; i++) {
          result.data.data[i].show = false
        }
        this.userList = result.data.data
        this.page.totalPages = result.data.pageInfo.pageTotal
        this.page.total = result.data.pageInfo.totalSize
      } else {
        this.$message.error(result.msg)
      }
      this.loading = false
    },
    // 查看
    showView (item) {
      console.log('item', item)
      this.showForm = item
      this.showForm.sysUserName = item.areaTree ? item.areaTree.sysUserName : ''
      this.viewDialogVisible = true
    },
    // 搜索
    async seachResult () {
      this.loading = true
      // 初始化分页信息
      this.page = {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      }
      let result = await this.$http.getAdmin({
        // areaId: this.activeItem,
        roleId: 22,
        // schoolName: this.search.schoolName,
        userName: this.search.userName,
        pageNum: this.page.page,
        paperId: this.pageData.id,
        isSuper: this.tabsStatus === 0 ? false : true,
        pageSize: this.page.pageSize
      })
      if (result.code === 20000) {
        // console.log(result.data)
        let obj = result.data.data
        for (let i = 0; i < obj.length; i++) {
          obj[i].show = false
        }
        this.userList = obj
        this.page.totalPages = result.data.pageInfo.pageTotal
        this.page.total = result.data.pageInfo.totalSize
      } else {
        this.$message.error(result.msg)
      }
      this.loading = false
    },
    // 分页回调接收参数
    changeCurrentPage (queryData) {
      this.page.page = queryData.page
      this.page.pageSize = queryData.pageSize
      this.getUser()
    },
    // 删除用户
    deleteUser (item, str) {
      if (item === 'all') {
        this.allBan.name = item
        this.allBan.title = str
        if (str === 'ban') {
          this.title = '您是否确认冻结所有用户？'
        } else if (str === 'unban') {
          this.title = '您是否确认解冻所有用户？'
        }
        this.isDelete = true
      } else {
        if (item.sysRoles[0].roleKey === 'school') {
          this.$message.error('您不能修改校级管理员账号！')
          return
        }
        this.userInfo = item
        this.userInfo.state = str
        if (str === 'delete') {
          this.title = '您是否确认删除该用户？'
        } else if (str === 'ban') {
          this.title = '您是否确认冻结该用户？'
        } else if (str === 'unban') {
          this.title = '您是否确认解冻该用户？'
        }
        this.isDelete = true
      }
    },
    // 确认删除回调
    async handleDelete () {
      console.log('this item', this.userInfo)
      this.loading = true
      let res
      if (this.allBan.name === 'all') {
        res = await this.$http.changeTeacher({
          operation: this.allBan.title
        })
      } else {
        console.log('userInfo', this.userInfo)
        res = await this.$http.changeStatus({
          id: this.userInfo.userId,
          operation: this.userInfo.state
        })
      }
      console.log('res', res)
      if (res.code === 20000) {
        this.$message.success('修改用户成功！')
        this.isDelete = false
        this.getUser()
      } else {
        this.$message.error(res.msg)
        this.isDelete = false
      }
      this.loading = false
    },
    uploadUser () {
      var obj = this.$refs.upload.uploadFiles[0] ? this.$refs.upload.uploadFiles[0].raw : ''
      var data = new FormData()
      if (obj) {
        data.append('file', obj)
        axios.post(`${this.GLOBAL.COMMON}/sysuser/import_mark_teacher`, data, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          console.log('res', res)
          if (res.data.code === 20000) {
            this.$message.success('管理员批量导入成功！')
            this.dialogVisible = false
            this.getUser()
          } else {
            this.$message.error(res.data.msg)
            this.dialogVisible = false
          }
        })
      } else {
        this.$message.error('请先选择文件！')
      }
    },
    async resetPassword (obj) {
      console.log(obj)
      let res = await this.$http.resetPassword({
        id: obj.userId
      })
      if (res.code === 20000) {
        this.$message.success('重置密码成功')
      } else {
        this.$message.error(res.msg)
      }
    },
    getAllPaper() {
      this.$http.getAllPage().then(res => {
        console.log('res', res)
        this.paper = res.data
      })
    },
    findTeacher(item) {
      this.group=true;
      this.pageData=item
      this.form.paperId = item.id
      // 获取管理员列表
      this.getUser()
    },
    changeTabs(status) {
      this.tabsStatus = status
      this.search.userName = ""
      this.page = {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      }
      this.getUser()
    }
  },
  components: {
    contSidebar,
    pagination
    // delConfim
  },
  mounted () {
    this.initData()
    this.$http.getALLRoles().then(res => {
      if (res.code === 20000) {
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].roleKey === 'city') {
          } else {
            this.role.push(res.data[i])
          }
        }
      } else {
        this.$message.error(res.msg)
      }
    })
    this.getAllPaper()
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
.container
  margin-left: 190px;
  width: calc(100% - 240px);
  .operation
    a
      padding 4px 6px
      width auto
  .info-search
    input
      font-size 12px
  .exam-info
    width 100%
    height 48px
    line-height 48px
    background #3d68d5
    position: relative;
    top: 26px;
    p
      span
        margin-left 20px
        color #fff
        font-size 12px
        font-weight bold
      a
        float right
        margin-right 40px
        color #fff
        font-size 12px
        text-decoration none
  .table
    width 100%
    margin-top 25px
    text-align center
    td
      border 1px solid #e0e0e0
      text-align center
      line-height 48px
    thead
      tr
        background background
        td
          height 48px
          font-weight bold
    tbody
      tr
        &.ban
          background background
        &:hover
          background #f9faff
        td
          height 46px
          font-size 14px
          position relative
          a
            font-size 16px
            color #555
            text-decoration none
          ul
            position absolute
            top 40px
            z-index 99
            width 89px
            height 152px
            background #fff
            box-shadow 0px 0px 15px 1px rgba(0, 0, 0, 0.07)
            border-radius 4px
            padding-top 10px
            li
              font-size 12px
              line-height 30px
              cursor pointer
              &:hover
                background #f9faff
                color #3d68d5
.download
    float: right;
    margin-top: -23px
    color color
    text-decoration none
.show-content
  width 70%
  margin-left 30px
  p
    line-height 30px
    font-weight bold
    span
      margin-right 10px
      color #999
      font-weight normal
      &:nth-child(1)
        display inline-block
        width 120px
      &:nth-child(2)
        font-weight bold
        color #333
</style>

<style>
  .el-upload-list.el-upload-list--text {
    display: block;
    float: right;
    margin-right: 256px;
    margin-top: -6px;
  }
</style>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
  .back
    cursor pointer
    font-size 14px
    color color
    span
      margin-left 10px
  .big-font
    font-size 18px
    font-weight bold
  .middle-font
    line-height 46px
    font-size 16px
    font-weight bold
  .ann
    color #e0e0e0
    .diy-input
      width 58px
      height 30px
      line-height 30px
      font-size 18px
      border-radius 5px
      border 1px solid #e0e0e0
      margin 0 6px
      text-align center
  .btn
    margin-top 40px
    a
      display inline-block
      width 70px
      height 38px
      text-align center
      line-height 38px
      border-radius 5px
      color #fff
      text-decoration none
      margin-right 14px
      &.save
        background color
      &.cancel
        color color
        border 1px solid color
  .fuzhu
    top 10px
</style>

<style>
  .info-search label .diy-input input.el-input__inner {
    font-size: 12px;
  }
  .el-upload-list {
    display: block !important;
  }
  .el-upload-list__item-name {
    margin-right: 20px;
  }
  .page-title {
    font-size:18px;
    font-weight:bold;
    color:rgba(85,85,85,1);
    margin-bottom: 10px;
  }
  .list-tabs {
    height: 30px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .list-tabs li{
    float: left;
    margin-right: 20px;
    padding: 0 20px;
    font-size:16px;
    font-weight: bold;
    cursor: pointer;
  }
  .list-tabs li.active {
    border-bottom: 4px solid #4177FF;
  }
</style>
